{% extends "base.html" %}
{% block title %}用户注册{% endblock %}

{% block extra_css %}
<style>
    .submit-btn {
        border-radius: 18px !important;
        background: #6366f1;
        border: 2px solid #3b82f6;
        color: #ffffff !important;
        transition: all 0.3s ease;
    }

    .submit-btn:hover {
        border-radius: 18px !important;
        background: #3b82f6;
        color: rgb(255, 255, 255) !important;
    }
    .step-indicator {
        display: flex;
        justify-content: center;
        margin-bottom: 2rem;
    }
    .auth-register-card {
        margin: 0 auto 1rem; 
        padding: 0.8rem;
        border-radius: 24px;
        max-width: 600px;
        min-height: 650px;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .step {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 0.5rem;
        transition: all 0.3s ease;
    }

    .step.active {
        background: #6366f1;
        color: white;
        transform: scale(1.1);
    }

    .role-option {
        border: 2px solid #e2e8f0;
        border-radius: 16px;
        padding: 1.5rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .role-option:hover {
        border-color: #6366f1;
        transform: translateY(-3px);
    }

    .role-option input[type="radio"] {
        display: none;
    }

    .role-option.active {
        border-color: #6366f1;
        background: rgba(99, 102, 241, 0.05);
    }

    .dynamic-field {
        animation: slideIn 0.3s ease;
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="row justify-content-center min-vh-100 align-items-start">
        <div class="col-md-8 col-lg-6">
            <div class="auth-register-card">
                <div class="auth-header">
                    <h3 class="mb-0"><i class="fas fa-user-plus me-2"></i>加入社区</h3>
                    <p class="mb-0 mt-2 opacity-75">开启编程学习之旅</p>
                </div>

                <div class="card-body px-4">
                    <form method="POST" id="registerForm">

                        <div class="mb-4">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="role-option">
                                        <input type="radio" name="role" value="teacher" 
                                               onchange="updateRegistrationForm()">
                                        <div class="h5 mb-2">👨🏫 教师</div>
                                        <small class="text-muted">创建和管理班级</small>
                                    </label>
                                </div>
                                <div class="col-md-4">
                                    <label class="role-option">
                                        <input type="radio" name="role" value="student" 
                                               onchange="updateRegistrationForm()">
                                        <div class="h5 mb-2">🎓 学生</div>
                                        <small class="text-muted">加入班级学习</small>
                                    </label>
                                </div>
                                <div class="col-md-4">
                                    <label class="role-option">
                                        <input type="radio" name="role" value="parent" 
                                               onchange="updateRegistrationForm()">
                                        <div class="h5 mb-2">👪 家长</div>
                                        <small class="text-muted">关注学习进展</small>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-bold">用户名</label>
                            <input type="text" name="username" 
                                   class="form-control"
                                   placeholder="设置您的用户名"
                                   minlength="3"
                                   required>
                            <div class="form-text text-end">至少3个字符</div>
                        </div>
                        
                        <div class="mb-4">
                            <label class="form-label fw-bold">密码</label>
                            <div class="password-strength">
                                <input type="password" name="password" 
                                       class="form-control"
                                       placeholder="输入安全密码"
                                       minlength="6"
                                       required>
                                <div class="form-text text-end">
                                    <span class="strength-bar"></span>
                                    至少6个字符
                                </div>
                            </div>
                        </div>

                        <div id="dynamicFields" class="dynamic-field">
                            <!-- 动态字段 -->
                        </div>

                        <button type="submit" class="btn submit-btn w-100 text-black">
                            <i class="fas fa-check me-2"></i>完成注册
                        </button>
                    </form>

                    <div class="text-center mt-4">
                        <a href="/login" class="auth-link">
                            已有账号？立即登录 <i class="fas fa-arrow-right ms-2"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function updateRegistrationForm() {
    const role = document.querySelector('input[name="role"]:checked').value;
    const container = document.getElementById('dynamicFields');
    
    // 清除现有内容
    container.innerHTML = '';
    
    // 添加新字段
    const fields = {
        teacher: `
            <div class="mb-4">
                <label class="form-label fw-bold">班级代码</label>
                <input type="text" name="teacher_class_id" 
                       class="form-control"
                       placeholder="输入班级代码"
                       required>
                <div class="form-text text-end">例如：CS2023A</div>
            </div>`,
        student: `
            <div class="mb-4">
                <label class="form-label fw-bold">加入班级</label>
                <input type="text" name="student_class_id"
                       class="form-control"
                       placeholder="输入班级代码"
                       required>
                <div class="form-text text-end">向教师获取班级代码</div>
            </div>`,
        parent: `
            <div class="mb-4">
                <label class="form-label fw-bold">关联学生</label>
                <input type="text" name="student_username" 
                       class="form-control"
                       placeholder="输入学生用户名">
                <div class="form-text text-end">确保学生已注册</div>
            </div>`
    };

    if(fields[role]) {
        container.innerHTML = fields[role];
        // 添加选项激活状态
        document.querySelectorAll('.role-option').forEach(opt => {
            opt.classList.remove('active');
        });
        event.target.closest('.role-option').classList.add('active');
    }
}
</script>
{% endblock %}